<!--
	作者：liushihao@yixuninfo.com
	时间：2017-01-09
	描述：楼盘管理
-->
<template>
  <div class="main-content">
    <div class="screen-frame clearfix">
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">楼盘名称：</label>
            <div class="col-md-8 col-sm-10">
              <input type="text" class="form-control" placeholder="楼盘名称" v-model="params.name" />
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">省份市区：</label>
            <div class="col-md-8 col-sm-10">
              <select
                class="form-control"
                style="width:32%;float:left"
                v-model="params.provinceId"
                id="province"
                v-on:click="getCity()"
              >
                <option value>全部</option>
                <option v-for="province in province_list" :value="province.id">{{province.name}}</option>
              </select>
              <span style="float:left">-</span>
              <select
                class="form-control"
                style="width:32%;float:left"
                v-model="params.cityId"
                id="city"
                v-on:click="getArea()"
              >
                <option value>全部</option>
                <option v-for="city in city_list" :value="city.id">{{city.name}}</option>
              </select>
              <span style="float:left">-</span>
              <select class="form-control" style="width:32%;float:left" v-model="params.areaId">
                <option value>全部</option>
                <option v-for="area in area_list" :value="area.id">{{area.name}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-3 col-sm-2 control-label">物业类型：</label>
            <div class="col-md-8 col-sm-10">
              <select class="form-control" v-model="params.estateType">
                <option value>全部</option>
                <option v-for="(row,index) in estate_list" v-bind:value="index">{{row}}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-5">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">均价：</label>
            <div class="col-md-8 col-sm-10">
              <select class="form-control" v-model="params.averagePrice">
                <option value>全部</option>
                <option value="<=10000">1万以下</option>
                <option value="10000-20000">1-2万</option>
                <option value="20000-30000">2-3万</option>
                <option value="30000-40000">3-4万</option>
                <option value="40000-50000">4-5万</option>
                <option value="50000-70000">5-7万</option>
                <option value=">70000">7万以上</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label">面积：</label>
            <div class="col-md-8 col-sm-10">
              <select class="form-control" v-model="params.acreage">
                <option value>全部</option>
                <option value="<=50">50m²以下</option>
                <option value="50-90">50-90m²</option>
                <option value="90-130">90-130m²</option>
                <option value="130-150">130-150m²</option>
                <option value="150-200">150-200m²</option>
                <option value="200-300">200-300m²</option>
                <option value=">300">300m²以上</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-md-4 col-sm-2 control-label"></label>
            <div class="col-md-8 col-sm-10" style="text-align: right;">
              <button
                type="submit"
                class="btn screen-submit"
                v-on:click="list(1)"
                style="position:relative;right:0"
              >查询</button>
              <!-- <button
                type="submit"
                class="btn screen-submit"
                v-on:click="showModal()"
                style="position:relative;right:0"
              >一客多盘</button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <ul class="property-info-list">
      <li v-for="(row, index) in premisesList">
        <div class="property-img">
          <img v-bind:src="row.url" />
        </div>
        <div class="property-info" style="height:auto;">
          <h1>
            {{row.name}}
            <Tag color="warning" v-if="row.mainPush==2">主推楼盘</Tag>
          </h1>
          <p class="info-address">［{{row.estateTypeName}}］{{row.fullAreaName}}</p>
          <!--<p class="info-price" style="color: grey;">面积&emsp;{{row.hxtInfoString}}&nbsp;</p>-->
          <p class="info-price">均价&emsp;{{row.averagePrice}}&nbsp;元/㎡</p>
          <p
            class="info-price"
            style="color: grey;"
            v-if="row.commission!=null && row.commission!=''"
          >{{row.commissionWay}}&emsp;{{row.commission}}</p>
          <p
            class="info-price"
            style="color: grey;"
            v-if="row.reward && row.reward!=0"
          >带看奖&emsp;{{row.reward}}&nbsp;元</p>
          <p
            class="info-price"
            style="color: grey;"
            v-if="row.dealAward"
          >{{row.dealType == 2?'现金奖':'成交奖'}}&emsp;{{row.dealAward}}&nbsp;元</p>
          <p
            class="info-price"
            style="color: grey;"
            v-if="row.visitProtect && row.visitProtectType && row.visitProtectType != 4"
          >到访延长时间&emsp;{{setProtectTime(row.visitProtect,row.visitProtectType)}}</p>
          <p
            class="info-price"
            style="color: grey;"
            v-if="row.specialTime && row.specialTimeType && row.specialTimeType != 4"
          >最短报备时间&emsp;{{setProtectTime(row.specialTime,row.specialTimeType)}}</p>
          <p
            class="info-price"
            style="color: grey;"
            v-if="row.saveDays && row.saveDaysType && row.saveDaysType != 4"
          >交易延长时间&emsp;{{setProtectTime(row.saveDays,row.saveDaysType)}}</p>
          <div class="property-details">
            <router-link
              :to="{name:'premisesDetail',params:{premisesId:row.id}}"
              class="btn btn-theme-border"
            >楼盘详情</router-link>
            <router-link
              :to="{name:'customerPremises',params:{premisesId:row.id}}"
              class="btn btn-theme-border"
            >报备客户</router-link>
          </div>
        </div>
      </li>
    </ul>
    <div id="laypage_div"></div>
<!--    <report-customer></report-customer>-->
    <Modal
        v-model="dialogVisible"
        title="一客多盘"
        width="1000"
        footer-hide
        @on-cancel="cancelReport"
     >
      <report-premises ref="reportPremises" @close="dialogVisible = false"/>
    </Modal>
  </div>
</template>
<script>
import ReportCustomer from "./reportCustomer.vue";
import ReportPremises from "./ReportPremises.vue"
export default {
  name: 'premises',
  components: {
    ReportCustomer,
    ReportPremises
  },
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10,
        name: "",
        provinceId: "",
        cityId: "",
        areaId: "",
        estateType: "",
        averagePrice: "",
        acreage: "",
        userId: window.localStorage.getItem("4_userId")
      },
      premisesList: [],
      estate_list: [],
      province_list: [],
      city_list: [],
      area_list: [],
      dealType: "",
      dialogVisible: false
    };
  },
  mounted: function() {
    //初始化加载
    this.list(0);
    this.estateList();
    this.provinceList();
  },
  methods: {
    showModal() {
      this.dialogVisible = true;
      // $("#batchSaveModal").modal("show");
    },
    cancelReport(){
       this.$refs.reportPremises.reportSuccess();
    },
    list: function(type) {
      var _self = this;
      //判断点查询按钮时，将当前页和条数设置为默认
      if (type == "1") {
        _self.params.pageNo = "1";
        _self.params.pageSize = "10";
      }
      var body = {};
      body.params = _self.params;
      var url = this.utilHelper.apiUrl + "/api/getAgentPremisesPage";
      _self.$http.post(url, body).then(response => {
        var body = response.body;
        if (body.result == "1") {
          var totalPages = body.resData.getAgentPremisesPage.totalPages;
          var total = body.resData.getAgentPremisesPage.total;
          var resRows = body.resData.getAgentPremisesPage.rows;
          _self.premisesList = resRows;
          if (resRows != null) {
            for (var i = 0; i < resRows.length; i++) {
              var premises = resRows[i];
              premises.averagePrice = _self.setAveragePrice(
                premises.averagePrice
              );
              //premises.url = _self.setPremisesImg(premises.url);
              var commission = premises.commission;
              if (commission) {
                var commissionJson = JSON.parse(commission);
                var commissionStr = "";
                for (var jsonStr in commissionJson) {
                  commissionStr +=
                    commissionJson[jsonStr].name +
                    "" +
                    commissionJson[jsonStr].typeValue +
                    "" +
                    commissionJson[jsonStr].type +
                    "  ";
                }
                premises.commission = commissionStr;
              }
            }
          }

          var current = body.resData.getAgentPremisesPage.pageNumber;
          layui.laypage.render({
            elem: "laypage_div", //容器。值支持id名、原生dom对象，jquery对象,
            pages: totalPages, //总页数
            limit: 10,
            curr: current,
            count: total,
            theme: "#f87242;", //皮肤
            first: "首页", //若不显示，设置false即可
            last: "尾页", //若不显示，设置false即可
            prev: "上一页", //若不显示，设置false即可
            next: "下一页", //若不显示，设置false即可
            layout: ["prev", "page", "next", "count"],
            jump: function(obj, first) {
              if (!first) {
                _self.params.pageNo = obj.curr;
                _self.list(0);
              }
            }
          });
        } else {
          //layer.alert("系统异常!");
        }
      });
    },
    estateList: function() {
      var _self = this;
      var body = {};
      body.params = {};
      var url = _self.utilHelper.apiUrl + "/common/getEnum/EstateTypeEnum";
      _self.$http.get(url, body).then(response => {
        var body = response.body.data;
        _self.estate_list = body;
      });
    },
    provinceList: function() {
      var _self = this;
      var body = {};
      body.params = {};
      var url = _self.utilHelper.apiUrl + "/api/getProvince";
      _self.$http.post(url, body).then(response => {
        var resData = response.body.resData;
        _self.province_list = resData.areaList;
      });
    },
    getCity: function() {
      var _self = this;
      _self.params.cityId = "";
      _self.params.areaId = "";
      var provinceId = $("#province").val();
      if (!provinceId) {
        provinceId = 0;
      }
      var url = _self.utilHelper.apiUrl + "/api/getCity";
      var body = {};
      body.params = {
        areaId: provinceId
      };
      _self.$http.post(url, body).then(response => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.city_list = resData.areaList;
          _self.area_list = "";
        }
      });
    },
    getArea: function() {
      var _self = this;
      var cityId = $("#city").val();
      if (!cityId) {
        cityId = 0;
      }
      var body = {};
      body.params = {
        areaId: cityId
      };
      var url = _self.utilHelper.apiUrl + "/api/getArea";
      _self.$http.post(url, body).then(response => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.area_list = resData.areaList;
        }
      });
    },
    //设置均价
    setAveragePrice(averagePrice) {
      if (averagePrice) {
        let price = averagePrice.split(",");
        if (price.length > 1) {
          if (price[0] && price[1]) {
            averagePrice = price[0] + " 至 " + price[1];
          } else if (price[0]) {
            averagePrice = price[0];
          } else if (price[1]) {
            averagePrice = price[1];
          }
        }
      }
      return averagePrice;
    },
    //设置列表图片
    setPremisesImg(imgUrl) {
      var index = imgUrl.lastIndexOf(".");
      return (
        imgUrl.substring(0, index) +
        "-m" +
        imgUrl.substring(index, imgUrl.length)
      );
    },
    setProtectTime(time, type) {
      if (type == "1") {
        return time / 1440 + "天";
      } else if (type == "2") {
        return time / 60 + "小时";
      } else if (type == "3") {
        return time + "分钟";
      }
      return "--";
    }
  }
};
</script>
<style>
.housing-list .control-details {
  min-height: 24px;
}
</style>
